/* eslint-disable react/no-danger */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useRef } from 'react';
import { Collapse } from 'antd';
import hljs from 'highlight.js';
import MarkdownIt from 'markdown-it';
import perf_shouldComponentUpdate from '@/assets/images/advanceReact/perf_shouldComponentUpdate.png';
import perf_shouldComponentUpdate2 from '@/assets/images/advanceReact/perf_shouldComponentUpdate2.png';
import perf_shouldComponentUpdate3 from '@/assets/images/advanceReact/perf_shouldComponentUpdate3.png';
import perf_immutable from '@/assets/images/advanceReact/perf_immutable.png';
import perf_memo from '@/assets/images/advanceReact/perf_memo.png';

import 'highlight.js/styles/atom-one-light.css';
import './index.less';

const { Panel } = Collapse;
const mdParser = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (error) {
        console.log(error);
      }
    }
    return ''; // 使用额外的默认转义
  },
});
performance;
export default function HighPerformance() {
  return (
    <div className="advance-react-wrapper">
      <Collapse defaultActiveKey={['1', '2', '3']}>
        <Panel header="1、shouldComponentUpdate" key="1">
          <code>shouldComponentUpdate(nextProps, nextState)</code>:
          通过返回值，决定是否进行re-render
          <p>
            <img src={perf_shouldComponentUpdate2} alt="" width="50%" />
            <img src={perf_shouldComponentUpdate} alt="" width="30%" />
          </p>
          <p>
            只要父组件发生了更新，那么所有的子组件都会被无条件更新。注:同样的情况也适用于组件自身的更新:当组件自
            身调用了setState后,那么不管setState前后的状态内容是否真正发生了变化，它都会去走一遍更新流程。
          </p>
          <p>
            优化代码：
            <img src={perf_shouldComponentUpdate3} alt="" width="50%" />
          </p>
        </Panel>
        <Panel header="2、PureComponent + Immutable.js" key="2">
          <code>PureComponent</code>:提前帮你安排好更新判定逻辑。
          shouldComponentUpdate虽然一定程度上帮我们解决了性能方面的问题，但在写了不计其数个shouldComponentUpdate逻辑之后，难免会怀疑人生。
          <p>
            PureComponent将会在shouldComponentUpdate中对组件更新前后的props和state进行浅比较，并根据浅比较的结果，决定是否需要继续更新流程。
          </p>
          <p>
            <h4>存在的问题：</h4>
            1、数据类型为引用类型若数据内容没变，但是引用变了那么浅比较仍然会认为“数据发生了变化”，进而触发-次不必要的更新，导致过度渲染。
            <br />
            2、若数据内容变了，但是引用没变，那么浅比较则会认为“数据没有发生变化”，进而阻断一次更新，导致不渲染。
          </p>
          <p>
            <code>Immutable</code>
            :“不可变值”，让“变化”无处遁形。PureComponent浅比较带来的问题，本质上是对“变化”的判断不够精准导致的。
          </p>
          <p>
            <code>“持久性数据”</code>
            ：指的是这个数据只要被创建出来了，就不能被更改，我们对当前数据的任何修改动作，都会导致一个新的对象的返回。
          </p>
          <img src={perf_immutable} alt="" width="50%" />
        </Panel>
        <Panel header="3、React.memo + useMemo" key="3">
          <img src={perf_memo} alt="" width="70%" />
          <p>React.memo控制是否需要重渲染一个组件，useMemo控制的则是是否需要重复执行某一段逻辑</p>
        </Panel>
      </Collapse>
    </div>
  );
}
